import React,{useContext} from "react"
import {StoreContext,useStoreHook} from "think-react-store"

const User = ()=>{
  const {state,dispatch} = useContext(StoreContext);
  const {User:{name,id,setName,setNameAsync,setId}} = useStoreHook();
  const handleClick = ()=>{
    setName({
      name:"同步修改"
    })
  }
  const handleAsyncClick = ()=>{
    setNameAsync({
      name:"异步修改"
    })
  }
  const handleIdClick = ()=>{
    setId({
      id:"666"
    })
  }

  return(
    <>
      <h2>this is UserComponent</h2>
      <h3>this is userStore.name {name}</h3>
      <h3>this is userStore.id {id}</h3>
      <button onClick={handleClick}>同步修改</button>
      <button onClick={handleAsyncClick}>异步修改</button>
      <button onClick={handleIdClick}>同步修改id</button>
    </>
  )
}
export default User